<template>
    <el-form :model="law" class="form-law" label-width="150px" style="width: 100%">
        <!--必要项-->
        <el-container class="decrease-add-container">
            <el-header class="title">
                <i class="el-icon-user-solid">基本信息</i>
            </el-header>
            <el-divider></el-divider>

            <el-container>
                <el-form-item label="案号：">
                    <el-input v-model="law.caseNo" style="width: 450px" readonly></el-input>
                </el-form-item>
                <el-form-item label="案由：">
                    <el-input v-model="law.caseCause" style="width: 450px"></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="委托人：">
                    <el-input v-model="law.caseWtr" style="width: 450px" readonly></el-input>
                </el-form-item>
                <el-form-item label="对方当事人：">
                    <el-input v-model="law.caseOppositeParties" style="width: 450px"></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="当事人(,分隔)：">
                    <el-input v-model="law.caseParties" style="width: 450px"></el-input>
                </el-form-item>
                <el-form-item label="对方当事人证件号：">
                    <el-input v-model="law.caseOppositeCardnum" style="width: 450px" readonly></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="收案日期：">
                    <el-date-picker
                            v-model="law.collectionTime"
                            align="right"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期"
                            style="width: 450px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="受理机关：">
                    <el-select v-model="law.caseAccept"
                               placeholder="请选择" value="" style="width: 450px">
                        <el-option label="公安机关" value="公安机关"></el-option>
                        <el-option label="检查机关" value="检查机关"></el-option>
                        <el-option label="审查机关" value="审查机关"></el-option>
                    </el-select>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="诉讼标的：">
                    <el-input v-model="law.caseLawsuitobj" style="width: 450px" readonly></el-input>
                </el-form-item>
                <el-form-item label="代理费：">
                    <el-input type="number" v-model="law.caseAgencyfee" style="width: 450px"></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="收费方式：">
                    <el-select v-model="law.caseChargeWay"
                               placeholder="请选择" value="" style="width: 450px">
                        <el-option label="收费方式" value=""></el-option>
                        <el-option label="免费" value="免费"></el-option>
                        <el-option label="计件收费" value="计件收费"></el-option>
                        <el-option label="计时收费" value="计时收费"></el-option>
                        <el-option label="按标的额比例收费" value="按标的额比例收费"></el-option>
                        <el-option label="风险代理收费" value="风险代理收费"></el-option>
                        <el-option label="标的+风险代理" value="标的+风险代理"></el-option>
                        <el-option label="固定+风险代理" value="固定+风险代理"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="风险收费：">
                    <el-input type="number" v-model="law.caseFxmoney" style="width: 450px"></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="是否享受政府补助：">
                    <el-select v-model="law.caseSubsidy"
                               placeholder="请选择" value="" style="width: 450px">
                        <el-option label="是" value="Y"></el-option>
                        <el-option label="否" value="N"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="补助金额：">
                    <el-input type="number" v-model="law.caseSubsidysal" style="width: 450px"></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="诉讼阶段：">
                    <el-checkbox-group v-model="checkedList" @change="handleSetStatus">
                        <el-checkbox
                                :key="status"
                                v-for="status in statusList"
                                :label="status"
                        ></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="诉讼地位：">
                    <el-radio-group v-model="law.caseLawsuitStatus">
                        <el-radio
                                :key="lawsuitStatus"
                                v-for="lawsuitStatus in lawsuitStatusList"
                                :label="lawsuitStatus">
                            {{lawsuitStatus}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-container>
        </el-container>

        <!--可选项头部-->
        <el-container class="decrease-add-container">
            <el-header class="title">
                <i class="el-icon-user-solid">其他选填</i>
                <el-button size="mini" @click="handleToggleOther" class="toogle">{{other.text}}</el-button>
            </el-header>
            <el-divider></el-divider>

            <!--其他选项-->
            <div v-show="other.enable" class="other">
                <el-container>
                    <el-form-item label="专属案号：">
                        <el-input v-model="law.casePropernum" style="width: 450px"></el-input>
                    </el-form-item>
                    <el-form-item label="杂费：">
                        <el-input type="number" v-model="law.caseProxysal" style="width: 450px"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="办案省份：">
                        <el-select
                                v-model="area.province"
                                placeholder="请选择" value="" style="width: 450px"
                                @change="handleChangeProvince">
                            <el-option label="省/直辖市地级区" value="省/直辖市地级区"></el-option>
                            <el-option
                                    v-for="province in provinceList"
                                    :key="province.code"
                                    :label="province.name"
                                    :value="province.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="办案城市：">
                        <el-select
                                v-model="area.city"
                                placeholder="请选择" value="" style="width: 450px">
                            <el-option label="请选择" value=""></el-option>
                            <el-option
                                    v-for="city in cityList"
                                    :key="city.code"
                                    :label="city.name"
                                    :value="city.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="是否指派：">
                        <el-select v-model="law.caseAssign"
                                   placeholder="请选择" value="" style="width: 450px">
                            <el-option label="是" value="Y"></el-option>
                            <el-option label="否" value="N"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="第三方：">
                        <el-input v-model="law.caseThirdParty" style="width: 450px"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="描述：">
                        <el-input type="textarea" v-model="law.caseRemarks" style="width: 1050px"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="相关文件：">
                        <el-upload
                                name="multipartfile"
                                action="http://localhost/upload"
                                :headers="{token:this.$store.state.token}"
                                :data="{folder:'law'}"
                                class="upload-demo"
                                ref="upload"
                                :limit="1"
                                :multiple="false"
                                :auto-upload="false"
                                :on-success="handleUploadSuccess">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-input v-model="law.caseCorrelationFile" v-show="false"></el-input>
                </el-container>
            </div>
        </el-container>

        <!--可选项头部-->
        <el-container class="decrease-add-container">
            <el-header class="title">
                <i class="el-icon-user-solid">办案律师</i>
                <el-button size="small" @click="handleAddRow" class="row-add">增加一行</el-button>
            </el-header>
            <el-divider></el-divider>

            <el-container v-for="(legal,index) in cwPerformancesplitList" :key="index" :class="{'legal-box':index!=0}">
                <!--身份-->
                <el-select v-model="legal.caseAttorney" :value="legal.caseAttorney" :disabled="index==0" style="margin-left: 100px">
                    <el-option value="主办律师" v-if="index==0"></el-option>
                    <el-option value="督办律师"></el-option>
                    <el-option value="协助律师"></el-option>
                </el-select>
                <!--名字-->
                <el-select @change="handleChangeUser(index,legal)"  v-model="legal.hrEmpId" :value="legal.empName" style="margin-left: 30px">
                    <el-option
                            :key="emp.id"
                            v-for="emp in empList"
                            :value="emp.id"
                            :label="emp.empName"
                    ></el-option>
                </el-select>
                <!--金额-->
                <el-input type="number" v-model="legal.cwPerformancesplit" style="width: 200px;margin-left: 30px"></el-input>
                <!--类型-->
                <el-select v-model="legal.cwSplitType" :value="legal.caseAttorney" style="margin-left: 30px">
                    <el-option label="固定金额" value="固定金额"></el-option>
                    <el-option label="百分比" value="百分比"></el-option>
                </el-select>
                <el-button @click="handleRemoveRow(index)" v-if="index!=0" type="danger" style="margin-left: 10px">删除一行</el-button>
            </el-container>
        </el-container>

        <el-container style="margin-top: 30px">
            <el-form-item>
                <el-button type="primary" @click="handleSubmit">确定提交</el-button>
            </el-form-item>
        </el-container>
    </el-form>
</template>

<script>
    //引入地区数据
    import {address} from "../../../assets/json/pc-code";
    //引入员工service
    import HrEmpService from '../../../model/hyc/HrEmpService.js'
    import {CwPerformancesplitService} from "../../../model/ww/cw_performancesplit/CwPerformancesplitService";
    const cwPerformancesplitService = CwPerformancesplitService.getInstance()
    const hrEmpService = HrEmpService.getInstance()

    export default {
        props:['law','active','cost'],
        data() {
            return {
                statusList:['立案','一审','二审','执行','再审'],
                lawsuitStatusList:[
                    '原告','被告','上诉人','被上诉人','申请执行人',
                    '申请人','被申请人','第三人','其他'
                ],
                checkedList:[],
                other:{
                    text:'展开',
                    enable:false
                },
                area:{
                    province:'省/直辖市地级区',
                    city:''
                },
                //省份数组
                provinceList:[],
                //城市数组
                cityList:[],
                //办案律师数组
                cwPerformancesplitList:[
                    {
                        hrEmpId:'',
                        caseAttorney:'主办律师',
                        empName:'',
                        cwPerformancesplit:'',
                        cwSplitType:'百分比',
                        cwRealSplitMoney:'',
                        type:1
                    }
                ],
                empList:[]
            }
        },
        methods:{
            //当复选框选中的数量改变时执行的方法
            handleSetStatus(){
                this.law.caseStatus = this.checkedList.join(',')
            },
            //当律师用户下拉框改变时执行的方法
            handleChangeUser(index,legal){
                this.empList.forEach(item => {
                    if(item.id == legal.hrEmpId){
                        legal.empName = item.empName
                    }
                })
            },
            //查询地区的方法
            getProvinceList(){
                this.provinceList = []
                address.forEach(item => this.provinceList.push(item))
            },
            handleChangeProvince(){
                try {
                    address.forEach(item => {
                        if(item.name == this.area.province){
                            this.cityList = item.childs
                            this.area.city = ''
                            throw new Error()
                        }else{
                            this.cityList = []
                        }
                    })
                }catch (e) {
                    return e
                }
            },
            //拿到员工列表的方法
            getEmpList(){
                hrEmpService.getEmpsByRole('律师,律师长').then(response => {
                    if(response.data.code === 0){
                        this.empList = response.data.data
                    }
                })
            },
            //切换其他选项是否显示
            handleToggleOther(){
                this.other.enable = !this.other.enable
                if(this.other.enable){
                    this.other.text = '收起'
                }else{
                    this.other.text = '展开'
                }
            },
            //文件上传成功的回调
            handleUploadSuccess(response){
                this.law.caseCorrelationFile = response.data
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            handleAddRow(){
                this.cwPerformancesplitList.push({
                    hrEmpId:'',
                    cwSplitType:'百分比',
                    caseAttorney:'督办律师',
                    cwPerformancesplit:0,
                    cwRealSplitMoney:0,
                    type:1
                })
            },
            handleRemoveRow(index){
                this.cwPerformancesplitList.splice(index,1)
            },
            //表单提交的方法
            handleSubmit(){
                this.law.caseTransactionRegion = this.area.province + this.area.city
                this.$emit('submitLaw',this.cwPerformancesplitList)
            },
        },
        watch:{
            active:{
                handler(){
                    if(this.active == 3 && this.cost == 0){
                        this.getProvinceList()
                        this.getEmpList()
                    }
                }
            },
            cost:{
                handler(){
                    if(this.active == 3 && this.cost == 0){
                        this.getProvinceList()
                        this.getEmpList()
                    }
                }
            }
        },
        created(){
            if(this.$route.params.law!=null && this.$route.params.law!=undefined){
                this.getProvinceList()
                this.getEmpList()
                this.checkedList = this.law.caseStatus.split(',')

                //查询办案律师
                cwPerformancesplitService.getByCaseLaw(this.law.id).then(response => {
                    if(response.data.code === 0){
                        this.cwPerformancesplitList = response.data.data
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .decrease-add-container{
        width: 100%;
    }
    .title{
        font-size: 20px;
        position: relative;
        top: 30px;
    }
    .form-law{
        margin-left: 20px;
    }
    .toogle,.row-add{
        margin-left: 30px;
    }
    .other{
        width: 100%;
    }
    .legal-box{
        margin-top: 10px;
    }
</style>
